<template>
  <div class="course-management">
    <!-- 左侧导航栏 -->
    <el-menu
      class="sidebar"
      :default-active="currentNav"
      background-color="#2c3e50"
      text-color="#bfcbd9"
      active-text-color="#fff"
      @select="handleNavSelect"
      unique-opened
    >
      <div class="avatar-container">
        <el-avatar size="large" :src="avatar || defaultAvatar"></el-avatar>
        <p class="user-name">{{ name || '未登录' }}</p>
      </div>

      <el-menu-item index="course-class" class="menu-item">
        <i class="el-icon-s-custom"></i>
        <span slot="title">我的班级</span>
      </el-menu-item>

      <!-- 新增培训进度导航项 -->
      <el-menu-item index="training-progress" class="menu-item">
        <i class="el-icon-odometer"></i>
        <span slot="title">培训进度</span>
      </el-menu-item>

      <el-menu-item index="registration" class="menu-item">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">报名与缴费</span>
      </el-menu-item>

      <el-menu-item index="exams" class="menu-item">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">考试与成绩</span>
      </el-menu-item>

      <el-menu-item index="certificates" class="menu-item">
        <i class="el-icon-trophy"></i>
        <span slot="title">证书管理</span>
      </el-menu-item>
    </el-menu>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <div class="page-header">
        <div class="user-actions">
          <el-button
            type="text"
            icon="el-icon-bell"
            class="notify-btn"
            @click="showNotification"
          ></el-button>
          <el-dropdown trigger="click">
            <span class="user-info">
              <el-avatar size="small" :src="avatar || defaultAvatar"></el-avatar>
              <span>{{ name || '未登录' }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="showPersonalCenter">
                个人中心
              </el-dropdown-item>
              <el-dropdown-item @click.native="setLayout" v-if="setting">
                布局设置
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容标题 -->
      <div class="content-title">
        <h2>{{ currentTitle }}</h2>
      </div>

      <!-- 标签页与操作栏 - 根据导航选择显示不同内容 -->
      <div class="top-bar">
        <!-- 个人中心内容（优先级最高） -->
        <div v-if="isShowingProfile" class="profile-container">
          <profile @close="closePersonalCenter"></profile>
        </div>

        <!-- 我的班级内容 -->
        <div v-else-if="currentNav === 'course-class'" style="height:100%;width:100%">
          <my-class :userId="userId1"></my-class>
          <!-- 移除了培训进度标签页，只保留我的班级 -->
          <!-- <el-tabs v-model="activeTab" class="custom-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="我的班级" name="my-teach">
              <my-class :userId="userId1"></my-class>
            </el-tab-pane>
          </el-tabs> -->
        </div>

        <!-- 新增培训进度内容区域 -->
        <div v-else-if="currentNav === 'training-progress' && !isShowingProfile" class="other-content" style="height:100%;width:100%">
          <TrainingProgress></TrainingProgress>
        </div>

        <!-- 报名与缴费内容 -->
        <div v-else-if="currentNav === 'registration' && !isShowingProfile" class="other-content"  style="height:100%;width:100%">
          <registration-payment ></registration-payment>
        </div>

        <!-- 考试与成绩内容 -->
        <div v-else-if="currentNav === 'exams' && !isShowingProfile" class="other-content"  style="height:100%;width:100%">
          <el-tabs v-model="active2Tab" class="custom-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="我的考试" name="exam">
              <Exam :userId="userId2"></Exam>
            </el-tab-pane>
            <el-tab-pane label="我的成绩" name="score">
               <Score :userId="userId2"></Score>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 证书管理内容 -->
        <div v-else-if="currentNav === 'certificates' && !isShowingProfile" class="other-content"  style="height:100%;width:100%">
          <CertificateManagement ></CertificateManagement>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 保持原有导入不变
import profile from "@/views/system/user/profile/index";
import MyClass from '@/components/portal/class/myClass';
import TrainingProgress from '@/components/portal/class/TrainingProgress';
import RegistrationPayment from '@/components/portal/registration/RegistrationPayment';
import Exam from '@/components/portal/examScore/Exam';
import Score from '@/components/portal/examScore/Score';
import CertificateManagement from '@/components/portal/CertificateManagement.vue';
import { mapGetters } from 'vuex';

export default {
  name: 'CourseManagement',
  components: {
    profile,
    MyClass,
    TrainingProgress,
    RegistrationPayment,
    Exam,
    Score,
    CertificateManagement
  },
  data() {
    return {
      // 保持原有数据不变
      userId1:"",
      userId2:"",
      studentId1:"",
      name: "",
      activeTab: 'my-teach',
      active2Tab: 'exam',
      selectedClass: '',
      totalProgress: 65,
      isShowingProfile: false,
      currentNav: 'course-class',
      loading: false,
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      setting: true,
      registrationSearch: '',
      regCurrentPage: 1,
      regPageSize: 10,
      examStatusFilter: '',
      examCurrentPage: 1,
      examPageSize: 10,
    };
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'nickName'
    ]),
    // 动态标题 - 添加培训进度的标题映射
    currentTitle() {
      const titleMap = {
        'course-class': '我的班级管理',
        'training-progress': '培训进度管理', // 新增
        'registration': '报名与缴费管理',
        'exams': '考试与成绩管理',
        'certificates': '证书管理'
      };
      return this.isShowingProfile ? '个人中心' : titleMap[this.currentNav] || '课程管理';
    }
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化数据保持不变
    async initData() {
      this.userId1 = this.$store.state.user.id+""
      this.loading = true;
      try {
        this.name = this.$store.state.user.nickName || '学员用户';
      } catch (error) {
        this.$message.error('数据加载失败，请重试');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    // 导航选择事件 - 增加培训进度的处理
    handleNavSelect(index) {
      this.currentNav = index;
      this.isShowingProfile = false;
      switch(index){
        case "course-class":
          this.userId1 = this.$store.state.user.id+""
          break;
        case "training-progress": // 新增
          // 如有需要可添加培训进度的初始化逻辑
          break;
        case "registration":
          break;
        case "exams":
          this.userId2 = this.$store.state.user.id+""
          break;
        case "certificates":
          break;
      }
    },

    // 其他方法保持不变
    handleTabClick() {
      if (this.activeTab === 'training-progress') {
      }
    },
    handleTab2Click() {
      if (this.activeTab === 'training-progress') {
      }
    },
    delay(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    showPersonalCenter() {
      this.isShowingProfile = true;
    },
    closePersonalCenter() {
      this.isShowingProfile = false;
    },
    showNotification() {
      this.$message({
        message: '您有3条未读通知',
        type: 'info',
        duration: 2000
      });
    },
    setLayout() {
      this.$message.info('布局设置功能即将上线');
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/portalLogin';
        });
      }).catch(() => {});
    },
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.course-management {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f7fa;
}

.sidebar {
  width: 200px;
  border-right: 1px solid #e8e8e8;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
  transition: width 0.3s ease;
}

.avatar-container {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #384c63;
  margin-bottom: 10px;
}

.avatar-container .el-avatar {
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-name {
  color: #fff;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item {
  height: 50px;
  line-height: 50px;
  margin: 5px 0;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #384c63 !important;
}

::v-deep .el-menu-item.is-active {
  background-color: #165dff !important;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.notify-btn {
  font-size: 18px;
  color: #6b7280;
  transition: color 0.2s;
}

.notify-btn:hover {
  color: #165dff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.content-title {
  margin-bottom: 20px;
  padding: 10px 0;
}

.content-title h2 {
  font-size: 20px;
  color: #1f2329;
  margin: 0;
  font-weight: 600;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
  flex-wrap: nowrap;
  height:100%;width:100%
}

.profile-container {
  width: 100%;
  padding: 10px 0;
}

.nav-content {
  flex: 1;
  min-width: 0;
}

.nav-content h3 {
  margin: 0;
  color: #1f2329;
  font-size: 16px;
  font-weight: 500;
}

.nav-content p {
  color: #6b7280;
  margin: 5px 0 0 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-buttons {
  margin-left: 20px;
  white-space: nowrap;
}

::v-deep .el-button {
  transition: all 0.2s;
}

.custom-tabs {
  flex: 1;
  min-width: 0;
}

::v-deep .el-tabs__nav {
  margin-bottom: -1px;
}

::v-deep .el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

::v-deep .el-tabs__item.is-active {
  color: #165dff;
  border-bottom: 2px solid #165dff;
  font-weight: 500;
}

.content-wrapper {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: calc(100% - 180px);
  box-sizing: border-box;
}

.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
}

.loading-state p {
  margin-top: 15px;
  color: #6b7280;
}

.other-content {
  padding: 10px 0;
}

@media (max-width: 992px) {
  .sidebar {
    width: 64px;
  }

  .user-name, .menu-item span {
    display: none;
  }

  .menu-item {
    text-align: center;
    padding: 0 !important;
  }

  .avatar-container {
    padding: 15px 0;
  }

  .avatar-container .el-avatar {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 15px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 15px;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
  }

  .action-buttons {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 576px) {
  .content-title h2 {
    font-size: 18px;
  }

  ::v-deep .el-tabs__item {
    padding: 0 12px;
    font-size: 13px;
  }
}
</style>
